<template>
	<view class="">
		<view class="dis navBtnWrap">
			<view class="navBtn-left dis" @click="chooseLocation">
				<image src="../../static/my/icon_shdz.png" mode=""></image>
				{{locationMsg||'选择地址'}}
			</view>
			<view class="navBtn-right dis">
				<view v-for="(item,index) in navList" :class="navIndex==index?'navActive':''" @click="navBtn(index)"
					:key="index">{{item.tit}}</view>

			</view>

		</view>
		<view class="" style="height: 120rpx;">

		</view>
		<view class="list" v-if="list.length!=0">
			<view class="list-msg dis" v-for="(item,index) in list" :key="index" @click="goPage(item.url)">
				<view class="list-msg-img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="list-msg-msg dis">
					<view class="list-msg-msg-left">
						{{item.storeName}}
					</view>
					<view class="list-msg-msg-center dis">
						<view class="text" v-for="(items,index) in items.tags" :key="index">{{items}}</view>
						<!-- <text v-for="(items,index) in items.tags" :key="index">{{items}}</text> -->
					</view>
					<view class="list-msg-msg-center" style="font-size: 24rpx;" @click.stop="openLocation(item)">
						<image style="width: 32rpx;margin-right: 10rpx;height: 32rpx;vertical-align: middle;"
							src="../../static/pagesA/icon_dw.png" mode=""></image>

						{{item.address}}
					</view>
					<view class="list-msg-msg-bom dis">
						<view class="list-msg-msg-bom-left">
							<text class="list-msg-msg-bom-left-left">￥{{item.price}}</text>
							<text class="list-msg-msg-bom-left-right">{{item.sales}}人约过</text>

						</view>
						<view class="list-msg-msg-bom-right">
							立即预约
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<noData></noData>
		</view>
		<home></home>
	</view>
</template>

<script>
	import home from '@/components/home/index.vue'
	import noData from '@/components/com/noData.vue'
	import {
		getVenueList
	} from '@/api/togeterRich/index.js'
	export default {
		components: {
			noData,
			home
		},
		data() {
			return {
				list: [],
				navData: {
					popularityOrder: '',
					distanceOrder: '',
					salesOrder: ''
				},
				locationMsg: '',
				location: {
					latitude: 0,
					longitude: 0,
				},
				locationData: {},
				navIndex: 0,
				navList: [{
						tit: '销售'
					},
					{
						tit: '距离'
					},
					{
						tit: '人气'
					}
				],
			}
		},
		onLoad() {
			this.locationData = uni.getStorageSync('location');
			if (this.locationData) {
				this.location = {
						latitude: this.locationData.latitude,
						longitude: this.locationData.longitude,
					},
					this.regexAddressBean(this.locationData.address)
				console.log("111")
			}
			this.init()
		},

		methods: {
			init() {
				let data = {

					...this.location,
					...this.navData,

				}
				getVenueList(data).then(res => {
					this.list = res.data.list
					console.log(res, 'ddd')
				})
				console.log(data)
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			openLocation(item) {
				uni.openLocation({

					latitude: Number(item.latitude),
					longitude: Number(item.longitude),
					scale: 12,
					complete: function(res) {
						console.log(res)
					}
				})
			},
			chooseLocation() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						that.regexAddressBean(res.address)
						uni.setStorageSync('location', res);
						that.location = {
							latitude: res.latitude,
							longitude: res.longitude,
						}
						that.init()

					},
					fail(err) {
						console.log(err, 'ddddd')
					}
				});
			},
			navBtn(index) {
				this.navIndex = index
				if (this.navIndex == 0) {
					this.navData.salesOrder = "DES"
				} else if (this.navIndex == 1) {
					this.navData.distanceOrder = "ASC"
				} else {
					this.navData.popularityOrder = "DES"
				}
				this.init()
			},
			regexAddressBean(address) {

				var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;

				var province = [];
				var addressBean = {
					province: null,
					country: null,
					city: null,
					address: null,
				};

				// console.log('address', address);
				// console.log('addressBean', addressBean);
				regex = /^(.*?[市]|.*?[州]|.*?地区|.*?特别行政区)(.*?[区]|.*?[市]|.*?[县])(.*?)$/g;
				var addxress = regex.exec(address);
				console.log('addxress', addxress);
				this.locationMsg = addxress[1]

				return addxress[1];

			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;

		.list-msg {
			.list-msg-msg-bom {
				justify-content: space-between;

				.list-msg-msg-bom-right {
					font-size: 28rpx;
					padding: 8rpx 21rpx;
					border-radius: 100rpx;
					background: $maincolor;
					color: #fff;
				}

				.list-msg-msg-bom-left {
					.list-msg-msg-bom-left-left {
						font-size: 34rpx;
						color: $maincolor;
					}

					.list-msg-msg-bom-left-right {
						font-size: 22rpx;
						margin-left: 20rpx;
						color: #F05208;
					}
				}
			}

			.list-msg-msg {
				flex-direction: column;
				justify-content: space-between;
				width: 67%;

				.list-msg-msg-center {
					font-size: 22rpx;
					flex-wrap: wrap;

					.text {
						border-radius: 100rpx;
						font-size: 22rpx;
						padding: 7rpx 11rpx;

						margin: 10rpx 10rpx 0 0;
						border: 1rpx solid $maincolor;
					}
				}

				.list-msg-msg-left {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					/* 限制在三行 */
					-webkit-box-orient: vertical;
					font-size: 28rpx;
				}
			}

			.list-msg-img {
				width: 200rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			margin-bottom: 20rpx;
			background: #fff;
			padding: 30rpx;
			justify-content: space-between;
			// height: 250rpx;
		}
	}

	.navActive {
		font-weight: 600;
		border-bottom: 2rpx solid $maincolor;
	}

	.navBtnWrap {
		background: #fff;
		position: fixed;
		width: 100%;
		top: 0;
		padding: 30rpx;
		margin: 0 auto;
		justify-content: space-between;


		.navBtn-left {

			// width: 25%;
			image {
				margin-right: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.navBtn-right {
			width: 60%;
			justify-content: space-between;
		}
	}
</style>